<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>普通用户-图书管理系统</title>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">

    <div th:include="common/user_header :: header"></div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">

                <li class="layui-nav-item ">
                    <a class="" href="javascript:;">借阅管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/userBorrowBookRecord">&emsp;&emsp;借书记录</a></dd>
                        <dd><a href="/borrowingPage">&emsp;&emsp;借阅书籍</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">书籍管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/userReturnBooksPage">&emsp;&emsp;归还书籍</a></dd>
                        <dd><a href="/findBookPage">&emsp;&emsp;查询书籍</a></dd>
                        <dd class="layui-this"><a href="/findAppoint">&emsp;&emsp;预约书籍</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="/userMessagePage">个人信息</a></li>

                <li class="layui-nav-item layui-nav-itemed"><a class="" href="/addMessage">留言板</a></li>
                <li class="layui-nav-item layui-nav-itemed"><a class="" href="/showEvaluate">用户评价</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body layui-container">

        <div class="layui-row">
            <div class="layui-col-md4"><!--左半部分-->

                <hr class="layui-bg-blue">
                <h1 style="text-align:left">查询预约</h1>
                <hr class="layui-bg-blue">

                <form class="layui-form" action="/findAppointPartInfo" id="findBookByNameForm">

                    <div class="layui-form-item">
                        <input placeholder="请输入书名信息" class="layui-input" autofocus autocomplete="off" type="text"
                               name="bookPartInfo">
                    </div>

                    <input class="layui-btn" type="submit" lay-submit="" value="查询">
                    <input style="margin-left: 20px;width: 70px" class="layui-btn del_btn"  lay-submit=""  value="预约" >


                </form>

<!--                <form class="layui-form" action="/selectTimeBook" id="selectTimeBook">-->
<!--                    <input style="line-height:30px;width: 110px" class="layui-btn" lay-submit=""  value="查询可预约">-->
<!--                </form>-->

                <br/>

            </div>

            <div id="window" title="预约书籍" style="margin: 5%; display: none">
                <form id="updateForm" class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">书籍编号</label>

                        <div class="layui-input-block">
                            <input type="text" name="userName" id="name"
                                   class="layui-input">
                        </div>
                    </div>
                </form>
            </div>


            <div class="layui-col-md7 layui-col-lg-offset1"><!--右半部分-->

                <hr class="layui-bg-blue">
                <h1 style="text-align: left">查询结果</h1>
                <hr class="layui-bg-blue">

                <table class="layui-table ">
                    <thead>
                    <tr>
                        <th>书籍编号</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th>预约时间</th>
                        <th>预约人</th>
                    </tr>
                    </thead>

                    <tr th:each="book:${bookList}">
                        <td><label th:text="${book.getBookId()}"></label></td>
                        <td><label th:text="${book.getBookName()}"></label></td>
                        <td><label th:text="${book.getBookAuthor()}"></label></td>
                        <td><label th:text="${book.getBookPublish()}"></label></td>
                        <td><label th:text="${book.getDate()}"></label></td>
                        <td><label th:text="${book.getBookingPerson()}"></label></td>
                    </tr>
                </table>
            </div>
        </div>


    </div>

    <div th:include="common/footer :: footer"></div>

</div>


<script src="/scripts/jquery.min.js"></script>
<script src="/layui/layui.js"></script>

<script>
    layui.use(['form', 'element'], function () {
        let form = layui.form;
        let element = layui.element;
    });

    //这里预约书籍
    $(document).ready(function () {
        $(".del_btn").click(function () {
            //页面层
            layer.open({
                type: 1 //Page层类型
                , skin: 'layui-layer-molv'
                , area: ['380px', '270px']
                , title: ['续期', 'font-size:18px']
                , btn: ['保存', '取消']
                , shadeClose: true
                , shade: 0 //遮罩透明度
                , content: $("#window")
                , yes: function () {
                    addTimeBook();
                }
            });
        });
    });


    //续期
    function addTimeBook() {
        let data = $('#updateForm').serialize();
        console.log(data)

        $.ajax({
            async: false,
            type: "post",
            url: "/appoint/book",
            dataType: "json",
            data: {bookId: data.substring(9, 10)},
            success: function (data) {
                console.log(data.toString());
                if (data.toString() == "true") {
                    layer.msg('预约成功!', {icon: 6, time: 2000});
                    setTimeout(function () {
                        location.reload();
                    }, 1500)
                } else {
                    layer.msg('该书籍已被预约!', {icon: 7, time: 2000});
                }
            },
            error: function (data) {
                layer.alert(data.result);
            }
        });
    };


</script>

</body>
</html>
